vue引入高德地图

2022-05-08 08:36| 来源: 网络整理| 查看: 265

（一）第一种script引入 1

引入到index.html中

2 vue项目中build文件夹中webpack.base.config.js中加入

// 引入外部库, 无需webpack打包处理 externals: { AMap: 'AMap', AMapUI: 'AMapUI' }

3 在项目中使用import AMap from AMap 即可下图是地图热力图效果

import AMap from 'AMap' var map; export default { data() { return {} }, mounted() { this.loadmap() }, methods: { loadmap() { map = new AMap.Map("container", { resizeEnable: true, center: [116.418261, 39.921984], zoom: 11 }); var clickEventListener = map.on('click', function (e) { var lng = e.lnglat.getLng(); var lat = e.lnglat.getLat(); console.log("经度：" + lng + "纬度" + lat); var lnglatXY = [lng, lat];//地图上所标点的坐标 AMap.service('AMap.Geocoder', function () {//回调函数 var geocoder = new AMap.Geocoder({}); geocoder.getAddress(lnglatXY, function (status, result) { if (status === 'complete' && result.info === 'OK') { //获得了有效的地址信息: //即，result.regeocode.formattedAddress console.log(result.regeocode.formattedAddress) //document.getElementById("address").value=result.regeocode.formattedAddress;//将获取到的地址信息赋值给文本框，保存进数据库 var address = result.regeocode.formattedAddress; } else { //获取地址失败 log.error('获取地址失败') } }); }) }); //热力图 var heatmap; map.plugin(["AMap.Heatmap"], function () { //初始化heatmap对象 heatmap = new AMap.Heatmap(map, { radius: 20, //给定半径 opacity: [0, 0.8] /*, gradient:{ 0.5: 'blue', 0.65: 'rgb(117,211,248)', 0.7: 'rgb(0, 255, 0)', 0.9: '#ffea00', 1.0: 'red' } */ }); var heatmapData = [{ "lng": 116.355675, "lat": 39.870089, "count": 65 }, { "lng": 116.295267, "lat": 39.987171, "count": 88 }, { "lng": 116.325411, "lat": 39.890974, "count": 90 }]; //设置数据集：该数据为北京部分“公园”数据 heatmap.setDataSet({ data: heatmapData, //headmapData数据通过在index.html引用headmapData.js文件生成也可以从后台传入json数据 max: 100 //设置最大 }); }); AMap.plugin('AMap.ToolBar', function () { var toolbar = new AMap.ToolBar(); map.addControl(toolbar) }) } } } #container { width: 100%; height: 300px; margin: 0px; font-size: 13px; }

使用之前需要安装插件命令：npm install vue-amap --save 安装好之后npm run dev 之后报错

Can’t find Python executable “python”, you can set the PYTHON env variable

直接运行如下命令

npm install --global --production windows-build-tools

此时重新npm run dev ，又报错webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序或批处理文件。直接到根目录删除node_modules文件，重新npm install即可最后npm run dev 成功（太不容易了）

（二）第二种vue-amap 一套专门用于vue的高德地图插件需要npm仓库安装

npm install vue-amap -save 　　然后在main.js入口文件中引入高德地图,分发出去,让每个组件都可以使用,

import AMap from 'vue-amap' 　　　　Vue.use(AMap) 　　　　// 初始化地图　　　　AMap.initAMapApiLoader({ 　　　　　　// 高德的key 　　　　　　key: 'YOUR_KEY', 　　　　　　// 插件集合　　　　　　plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'] 　　　　})

然后在组件中直接调用插件中封装好的组件就可以了,例如

详情参见官方文档 https://elemefe.github.io/vue-amap/

【本文地址】

vue引入高德地图

vue引入高德地图

今日新闻

推荐新闻